<template>
  <div v-if="dialogVisible" class="event-manage-dialog">
    <div class="el-dialog">
      <div class="el-dialog__header">
        <span class="el-dialog__title">事件处理</span>
        <button class="el-dialog__headerbtn" @click="handleClose">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <div class="el-dialog__body">
        <div class="dialog-content">
          <div class="table-operations">
            <button class="el-button el-button--primary" @click="handleAdd">
              <i class="el-icon-plus"></i> 事件上报
            </button>
          </div>
          
          <table class="el-table">
            <thead>
              <tr>
                <th>事件来源</th>
                <th>时间</th>
                <th>地点</th>
                <th>描述</th>
                <th>状态</th>
                <th>事件等级</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(event, index) in events" :key="index">
                <td>{{ event.source }}</td>
                <td>{{ event.time }}</td>
                <td>{{ event.location }}</td>
                <td>{{ event.description }}</td>
                <td>
                  <span :class="['status-tag', getStatusClass(event.status)]">
                    {{ event.status }}
                  </span>
                </td>
                <td>
                  <span :class="['level-tag', getLevelClass(event.level)]">
                    {{ event.level }}
                  </span>
                </td>
                <td>
                  <button class="el-button el-button--primary el-button--small" @click="handleEdit(event)">
                    编辑
                  </button>
                  <button class="el-button el-button--danger el-button--small" @click="handleDelete(event)">
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 编辑/新增事件对话框 -->
    <div v-if="editDialogVisible" class="el-dialog edit-dialog">
      <div class="el-dialog__header">
        <span class="el-dialog__title">{{ isEdit ? '编辑事件' : '事件上报' }}</span>
        <button class="el-dialog__headerbtn" @click="editDialogVisible = false">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <div class="el-dialog__body">
        <form class="el-form">
          <div class="el-form-item">
            <label class="el-form-item__label">事件来源</label>
            <div class="el-form-item__content">
              <input
                type="text"
                v-model="currentEvent.source"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">时间</label>
            <div class="el-form-item__content">
              <input
                type="datetime-local"
                v-model="currentEvent.time"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">地点</label>
            <div class="el-form-item__content">
              <input
                type="text"
                v-model="currentEvent.location"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">描述</label>
            <div class="el-form-item__content">
              <textarea
                v-model="currentEvent.description"
                class="el-textarea__inner"
                rows="3"
              ></textarea>
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">状态</label>
            <div class="el-form-item__content">
              <select v-model="currentEvent.status" class="el-input__inner">
                <option value="待处理">待处理</option>
                <option value="处理中">处理中</option>
                <option value="已处理">已处理</option>
              </select>
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">事件等级</label>
            <div class="el-form-item__content">
              <select v-model="currentEvent.level" class="el-input__inner">
                <option value="红色">红色</option>
                <option value="橙色">橙色</option>
                <option value="黄色">黄色</option>
                <option value="蓝色">蓝色</option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="el-dialog__footer">
        <button class="el-button" @click="editDialogVisible = false">取消</button>
        <button class="el-button el-button--primary" @click="handleSave">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  events: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'update:events'])

const dialogVisible = ref(props.modelValue)
const editDialogVisible = ref(false)
const isEdit = ref(false)
const currentEvent = ref({
  source: '',
  time: '',
  location: '',
  description: '',
  status: '待处理',
  level: '蓝色'
})

// 监听对话框显示状态
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
  emit('update:modelValue', val)
})

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    '待处理': 'status-pending',
    '处理中': 'status-processing',
    '已处理': 'status-completed'
  }
  return statusMap[status] || ''
}

// 获取等级样式类
const getLevelClass = (level) => {
  const levelMap = {
    '红色': 'level-red',
    '橙色': 'level-orange',
    '黄色': 'level-yellow',
    '蓝色': 'level-blue'
  }
  return levelMap[level] || ''
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 新增事件
const handleAdd = () => {
  isEdit.value = false
  currentEvent.value = {
    source: '',
    time: '',
    location: '',
    description: '',
    status: '待处理',
    level: '蓝色'
  }
  editDialogVisible.value = true
}

// 编辑事件
const handleEdit = (row) => {
  isEdit.value = true
  currentEvent.value = { ...row }
  editDialogVisible.value = true
}

// 删除事件
const handleDelete = (row) => {
  if (confirm('确定要删除该事件吗？')) {
    const newEvents = props.events.filter(event => event !== row)
    emit('update:events', newEvents)
    alert('删除成功')
  }
}

// 保存事件
const handleSave = () => {
  if (!currentEvent.value.source || !currentEvent.value.time || 
      !currentEvent.value.location || !currentEvent.value.description) {
    alert('请填写完整信息')
    return
  }

  const newEvents = [...props.events]
  if (isEdit.value) {
    const index = newEvents.findIndex(event => event === currentEvent.value)
    if (index !== -1) {
      newEvents[index] = { ...currentEvent.value }
    }
  } else {
    newEvents.push({ ...currentEvent.value })
  }
  
  emit('update:events', newEvents)
  editDialogVisible.value = false
  alert(isEdit.value ? '编辑成功' : '上报成功')
}
</script>

<style lang="scss" scoped>
.event-manage-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  .el-dialog {
    background: rgba(0, 24, 48, 0.95);
    border: 1px solid rgba(0, 194, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
    border-radius: 4px;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;

    .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid rgba(0, 194, 255, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .el-dialog__title {
        color: #00c2ff;
        font-size: 18px;
        font-weight: bold;
      }

      .el-dialog__headerbtn {
        background: none;
        border: none;
        color: #00c2ff;
        cursor: pointer;
        font-size: 20px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0, 194, 255, 0.1);
          transform: rotate(90deg);
        }
      }
    }

    .el-dialog__body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 194, 255, 0.3);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 24, 48, 0.3);
        border-radius: 3px;
      }
    }

    .el-dialog__footer {
      padding: 20px;
      border-top: 1px solid rgba(0, 194, 255, 0.3);
      text-align: right;
      flex-shrink: 0;
    }
  }

  .edit-dialog {
    width: 50%;
    max-width: 600px;
  }

  .dialog-content {
    .table-operations {
      margin-bottom: 20px;
    }

    .el-table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;

      th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 194, 255, 0.2);
      }

      th {
        background: #00BAFF;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
      }

      td {
        color: #fff;
        font-size: 14px;
      }

      tr {
        &:nth-child(odd) {
          background: #003B51;
        }
        &:nth-child(even) {
          background: #0A2732;
        }
        &:hover td {
          background: rgba(0, 194, 255, 0.1);
        }
      }
    }
  }

  .status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;

    &.status-pending {
      background: #E6A23C;
    }

    &.status-processing {
      background: #409EFF;
    }

    &.status-completed {
      background: #67C23A;
    }
  }

  .level-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;

    &.level-red {
      background: #F56C6C;
    }

    &.level-orange {
      background: #E6A23C;
    }

    &.level-yellow {
      background: #E6A23C;
    }

    &.level-blue {
      background: #409EFF;
    }
  }

  .el-form {
    .el-form-item {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;

      .el-form-item__label {
        width: 100px;
        color: #00c2ff;
        text-align: right;
        padding-right: 12px;
      }

      .el-form-item__content {
        flex: 1;

        .el-input__inner,
        .el-textarea__inner,
        select {
          width: 100%;
          padding: 8px 12px;
          background: rgba(0, 24, 48, 0.7);
          border: 1px solid rgba(0, 194, 255, 0.3);
          color: #fff;
          border-radius: 4px;

          &:focus {
            border-color: #00c2ff;
            outline: none;
          }
        }

        select {
          appearance: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300c2ff' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 12px center;
          padding-right: 30px;
        }
      }
    }
  }

  .el-button {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    margin-left: 8px;
    background: rgba(0, 24, 48, 0.7);
    color: #fff;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 194, 255, 0.2);
      transform: translateY(-2px);
    }

    &--primary {
      background: #00c2ff;
      color: #fff;

      &:hover {
        background: #00a8e0;
      }
    }

    &--danger {
      background: #f56c6c;
      color: #fff;

      &:hover {
        background: #e64242;
      }
    }

    &--small {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}
</style> 